﻿.is-none {
    display: none;
}

.is-table {
    display: table !important;
}

.is-table-row {
    display: table-row !important;
}

.is-table-cell {
    display: table-cell !important;
}

.is-borderless {
    border: 0 !important;
}

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @each $prop, $abbrev in (margin: m, padding: p) {
            @each $size, $length in $spacers {

                .is-#{$abbrev}#{$infix}-#{$size} {
                    #{$prop}: $length !important;
                }

                .is-#{$abbrev}t#{$infix}-#{$size},
                .is-#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-top: $length !important;
                }

                .is-#{$abbrev}r#{$infix}-#{$size},
                .is-#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-right: $length !important;
                }

                .is-#{$abbrev}b#{$infix}-#{$size},
                .is-#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-bottom: $length !important;
                }

                .is-#{$abbrev}l#{$infix}-#{$size},
                .is-#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-left: $length !important;
                }
            }
        }
        // Some special margin utils
        .is-m#{$infix}-auto {
            margin: auto !important;
        }

        .is-mt#{$infix}-auto,
        .is-my#{$infix}-auto {
            margin-top: auto !important;
        }

        .is-mr#{$infix}-auto,
        .is-mx#{$infix}-auto {
            margin-right: auto !important;
        }

        .is-mb#{$infix}-auto,
        .is-my#{$infix}-auto {
            margin-bottom: auto !important;
        }

        .is-ml#{$infix}-auto,
        .is-mx#{$infix}-auto {
            margin-left: auto !important;
        }

        .is-table#{$infix} {
            display: table !important;
        }

        .is-table-row#{$infix} {
            display: table-row !important;
        }

        .is-table-cell#{$infix} {
            display: table-cell !important;
        }
    }
}

@each $dimension in $dimensions {
    .is-#{$dimension}x#{$dimension} {
        height: $dimension * 1px;
        width: $dimension * 1px;
    }
}


.has-border {
    border: $border-width solid $border-color !important;
}

.has-border-top {
    border-top: $border-width solid $border-color !important;
}

.has-border-right {
    border-right: $border-width solid $border-color !important;
}

.has-border-bottom {
    border-bottom: $border-width solid $border-color !important;
}

.has-border-left {
    border-left: $border-width solid $border-color !important;
}

.has-border-0 {
    border: 0 !important;
}

.has-border-top-0 {
    border-top: 0 !important;
}

.has-border-right-0 {
    border-right: 0 !important;
}

.has-border-bottom-0 {
    border-bottom: 0 !important;
}

.has-border-left-0 {
    border-left: 0 !important;
}

@each $name, $value in $theme-colors {
    $color: $value;

    .has-border-#{$name} {
        border-color: $color !important;
    }
}

.has-border-white {
    border-color: white !important;
}

.has-rounded-border {
    border-radius: $radius !important;
}

.has-rounded-border-top {
    border-top-left-radius: $radius !important;
    border-top-right-radius: $radius !important;
}

.has-rounded-border-right {
    border-top-right-radius: $radius !important;
    border-bottom-right-radius: $radius !important;
}

.has-rounded-border-bottom {
    border-bottom-right-radius: $radius !important;
    border-bottom-left-radius: $radius !important;
}

.has-rounded-border-left {
    border-top-left-radius: $radius !important;
    border-bottom-left-radius: $radius !important;
}

.has-rounded-border-circle {
    border-radius: 50% !important;
}

.has-rounded-border-pill {
    border-radius: $radius-pill !important;
}

.has-rounded-border-0 {
    border-radius: 0 !important;
}

$border-sides: ("top", "right", "bottom", "left");
$border-sizes: (1, 2, 3, 4, 5);

@each $size in $border-sizes {
    .has-border-#{$size} {
        border: #{$size}px solid $border-color !important;
    }

    @each $color-name, $color-value in $theme-colors {
        .has-border-#{$color-name}-#{$size} {
            border: #{$size}px solid $color-value !important;
        }
    }

    @each $side in $border-sides {
        .has-border-#{$side}-#{$size} {
            border-#{$side}: #{$size}px solid $border-color !important;
        }

        @each $color-name, $color-value in $theme-colors {
            .has-border-#{$color-name}-#{$side}-#{$size} {
                border-#{$side}: #{$size}px solid $color-value !important;
            }
        }
    }
}

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .is-flex-direction#{$infix}-row {
            flex-direction: row !important;
        }

        .is-flex-direction#{$infix}-column {
            flex-direction: column !important;
        }

        .is-flex-direction#{$infix}-row-reverse {
            flex-direction: row-reverse !important;
        }

        .is-flex-direction#{$infix}-column-reverse {
            flex-direction: column-reverse !important;
        }

        .is-flex-wrap#{$infix}-wrap {
            flex-wrap: wrap !important;
        }

        .is-flex-wrap#{$infix}-nowrap {
            flex-wrap: nowrap !important;
        }

        .is-flex-wrap#{$infix}-wrap-reverse {
            flex-wrap: wrap-reverse !important;
        }

        .is-flex#{$infix}-fill {
            flex: 1 1 auto !important;
        }

        .is-flex#{$infix}-grow-0 {
            flex-grow: 0 !important;
        }

        .is-flex#{$infix}-grow-1 {
            flex-grow: 1 !important;
        }

        .is-flex#{$infix}-shrink-0 {
            flex-shrink: 0 !important;
        }

        .is-flex#{$infix}-shrink-1 {
            flex-shrink: 1 !important;
        }

        .is-justify-content#{$infix}-flex-start {
            justify-content: flex-start !important;
        }

        .is-justify-content#{$infix}-flex-end {
            justify-content: flex-end !important;
        }

        .is-justify-content#{$infix}-center {
            justify-content: center !important;
        }

        .is-justify-content#{$infix}-space-between {
            justify-content: space-between !important;
        }

        .is-justify-content#{$infix}-space-around {
            justify-content: space-around !important;
        }

        .is-align-items#{$infix}-flex-start {
            align-items: flex-start !important;
        }

        .is-align-items#{$infix}-flex-end {
            align-items: flex-end !important;
        }

        .is-align-items#{$infix}-center {
            align-items: center !important;
        }

        .is-align-items#{$infix}-baseline {
            align-items: baseline !important;
        }

        .is-align-items#{$infix}-stretch {
            align-items: stretch !important;
        }

        .is-align-self#{$infix}-auto {
            align-self: auto !important;
        }

        .is-align-self#{$infix}-flex-start {
            align-self: flex-start !important;
        }

        .is-align-self#{$infix}-flex-end {
            align-self: flex-end !important;
        }

        .is-align-self#{$infix}-center {
            align-self: center !important;
        }

        .is-align-self#{$infix}-baseline {
            align-self: baseline !important;
        }

        .is-align-self#{$infix}-stretch {
            align-self: stretch !important;
        }

        .is-align-content#{$infix}-flex-start {
            align-content: flex-start !important;
        }

        .is-align-content#{$infix}-flex-end {
            align-content: flex-end !important;
        }

        .is-align-content#{$infix}-center {
            align-content: center !important;
        }

        .is-align-content#{$infix}-space-between {
            align-content: space-between !important;
        }

        .is-align-content#{$infix}-space-around {
            align-content: space-around !important;
        }

        .is-align-content#{$infix}-stretch {
            align-content: stretch !important;
        }

        @for $i from 0 through 12 {
            .is-flex-order#{$infix}-#{$i} {
                order: $i;
            }
        }
    }
}

// Width and height

@each $prop, $abbrev in (width: width, height: height) {
    @each $size, $length in $sizes {
        .is-#{$abbrev}-#{$size} {
            #{$prop}: $length !important;
        }
    }
}

.is-max-width-100 {
    max-width: 100% !important;
}

.is-max-height-100 {
    max-height: 100% !important;
}

// Viewport additional helpers

.is-min-viewport-width-100 {
    min-width: 100vw !important;
}

.is-min-viewport-height-100 {
    min-height: 100vh !important;
}

.is-viewport-width-100 {
    width: 100vw !important;
}

.is-viewport-height-100 {
    height: 100vh !important;
}

.is-visible {
    visibility: visible !important;
}

// Browser default
.is-vertical-align-baseline {
    vertical-align: baseline !important;
}

.is-vertical-align-top {
    vertical-align: top !important;
}

.is-vertical-align-middle {
    vertical-align: middle !important;
}

.is-vertical-align-bottom {
    vertical-align: bottom !important;
}

.is-vertical-align-text-bottom {
    vertical-align: text-bottom !important;
}

.is-vertical-align-text-top {
    vertical-align: text-top !important;
}

.has-shadow-small {
    box-shadow: $box-shadow-sm !important;
}

.has-shadow {
    box-shadow: $box-shadow !important;
}

.has-shadow-large {
    box-shadow: $box-shadow-lg !important;
}

.has-shadow-none {
    box-shadow: none !important;
}

@each $value1 in $overflows {
    .is-overflow-#{$value1} {
        overflow: $value1 !important;
    }

    @each $value2 in $overflows {
        .is-overflow-#{$value1}-#{$value2} {
            overflow: $value1 $value2 !important;
        }
    }
}

.has-text-wrap {
    white-space: normal !important;
}

.has-text-nowrap {
    white-space: nowrap !important;
}

.has-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-unordered-list-unstyled {
    padding-left: 0;
    list-style: none;
}

ol.is-ordered-list {
    &:not(.is-ordered-list-unstyled) {
        margin-left: 2rem;
        margin-bottom: 1rem;
    }

    &-unstyled {
        padding-left: 0;
        list-style: none;
    }

    &-lower-alpha {
        list-style-type: lower-alpha;
    }

    &-lower-roman {
        list-style-type: lower-roman;
    }

    &-upper-alpha {
        list-style-type: upper-alpha;
    }

    &-upper-roman {
        list-style-type: upper-roman;
    }
}


// Position

.is-position {
    &-static {
        position: static !important;
    }

    &-relative {
        position: relative !important;
    }

    &-absolute {
        position: absolute !important;
    }

    &-fixed {
        position: fixed !important;
    }

    &-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

@each $name, $value in $position-values {
    .is-top-#{$name} {
        top: #{$value} !important;
    }

    .is-bottom-#{$name} {
        bottom: #{$value} !important;
    }

    .is-left-#{$name} {
        left: #{$value} !important;
    }

    .is-right-#{$name} {
        right: #{$value} !important;
    }
}

.is-translate-middle {
    transform: translate(-50%, -50%) !important;
}

.is-translate-middle-x {
    transform: translateX(-50%) !important;
}

.is-translate-middle-y {
    transform: translateY(-50%) !important;
}
